<template>
  <div class="dingdan">
    <nav-bar>
      电影订单
    </nav-bar>
    <div class="dingdan-box">
      <ul class="dingdan-ul">
        <li
          class="dingdan-list"
          ref="quxiao"
          v-for="(item,index) in lists" :key="index"
        >
          <div class="dingdan-main" >
            <div class="img">
              <img :src="`${publicPath}${item.imgs}`">
            </div>
            <div class="dingdan-center">
              <p style="font-size: 14px;color: #989797">{{item.text}}</p>
              <p>{{item.title}}</p>
              <p>{{item.author}}</p>
            </div>
            <div @click="qx(item.id,index)" style="background-color: #ec8181;padding: 5px;border-radius: 5px">取消</div>
          </div>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import http from "@/util/http";

export default {
  name: 'dingdan',
  components: {

    NavBar
  },
  data() {
    return {
      publicPath:process.env.BASE_URL,
      lists: []
    }
  },
  created() {
    http.get('/dingdan',{

    }).then(res =>{
      this.lists = res.data
    })
  },
  methods:{
    qx(id,index){
     this.lists.splice(this.$refs.quxiao[index],1)
      http.delete(`/dingdan/${id}`,{

      }).then(res=>{
        console.log('删除成功')
      })
    },

  }
}
</script>

<style scoped lang="scss">
.dingdan, .dingdan-box, .dingdan-ul{
  width: 100%;
  height: 100%;
}
.dingdan-box{
  padding-bottom: 80px;
}
.dingdan-list{
  height: 4rem;
  width: 100%;
  @media screen and (min-width: 480px) {
    height: 2rem;
  }
}
.dingdan-main{
  height: 100%;
  margin:10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.dingdan-list .img{
  width: 5rem;
  height: 100%;
  @media screen and (min-width: 480px) {

  }
}
img{
  width: 100%;
  height: 100%;
}
.dingdan-conter{
  height: 100%;
  width: 100%;
}
</style>
